<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 引入jquery.js -->
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>
    <!-- 引入 echarts.js -->
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/highcharts.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/exporting.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/export-data.js"></script>
    <title>商品销售情况柱状图</title>
</head>
<body style="align: center; margin: 56px 0px 0px 25%;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px; height: 400px;"></div>

</body>
<script type="text/javascript">
        $(function () {
            var chart= {
                type:'column'
            };var title={
                text: '商品近日销售比较图（饼状图）'
            };var subtitle = {
                text: '会计部'
            };;var yAxis = {
                min:0,
                title:{
                    text:'成交金额(￥)'
                }
            };var tooltip = {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            };var plotOptions = {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            };var credits = {
                enabled: false
            };
            var json = {};
            json.chart = chart;
            json.title = title;
            json.subtitle  = subtitle ;
            json.tooltip = tooltip;
            json.plotOptions = plotOptions;
            json.credits = credits;
            json.yAxis = yAxis;


            var categories = [];var series = [];var xAxis = {};var data=[];
            /*for(var i=0;i<5;i++){
                categories.push(i+1+" ");
                data.push(2*i+1);
            }*/
            $.ajax({
                type:'post',
                url:'/echart/getAllOrdersComeInByDate',
                success:function (msg) {
                    for(var i=0;i<msg.length;i++){
                        // console.log(typeof msg[i].total+':'+typeof msg[i].ordertime);
                        categories.push(msg[i].ordertime);
                        data.push(msg[i].total);
                    }
                    series.push({data:data});
                    xAxis.categories = categories;
                    xAxis.crosshair = true;
                    json.xAxis = xAxis;
                    json.series = series;
                    $("#main").highcharts(json);
                }
            });
            /*xAxis.crosshair = true;
            xAxis.categories = categories;
            series.push({data:data});
            json.xAxis =xAxis;
            json.series = series;
            $("#main").highcharts(json);*/


    });

</script>
</html>
